<template>
  <div>
    <el-row :getter="20">
      <el-col :span="imagesList.span || 4" v-for="(item,index) of imagesList.image" :key="index">
        <div id="container"
             :style="{margin:imagesList.margin? imagesList.margin:'10px',border : imagesList.border ? '1px solid black':null}">
          <div style="margin: 10px;">
            <a @click="gotoDetails(item.id,item.detailPath)"><img :src="getBaseImagePath(item.path)" :width="item.width|| '100%'"
                                                                 :height="item.height|| '100%' "/></a>
            <el-row v-if="item.showModel === showModel.BUSINESS">
              <el-col :span="24" v-if="item.title" style="margin-top: 5px;height: 35px;overflow: hidden;text-overflow: ellipsis">
                <a @click="gotoDetails(item.id,item.detailPath)"> {{ item.title }}</a>
              </el-col>
              <el-col :span="10" v-if="item.evaluate" style="margin-top: 10px;color: rgb(155,166,193);float: left">
                <a  @click="gotoDetails(item.id,item.detailPath)"> <span>评价</span> {{ item.evaluate }}</a>
              </el-col>
              <el-col :span="10" v-if="item.collection" style="margin-top: 10px;color: rgb(155,166,193);float: left">
                <a  @click="gotoDetails(item.id,item.detailPath)"> <span>收藏</span> {{ item.collection }}</a>
              </el-col>
              <el-col :span="24" v-if="item.price" style="margin-top: 10px;font-size: 20px;color: red">
                <div style="float: left">
                  <a  @click="gotoDetails(item.id,item.detailPath)">
                    <span style="font-size: 10px;">￥</span><span>{{ item.price }}</span> <s
                    v-if="item.originalPrice" style="font-size: 10px;color: rgb(155,166,193);">￥
                    {{item.originalPrice}}</s>
                  </a>
                </div>
                <div>
                  <div v-if="item.sales" style="font-size: 10px;color: rgb(155,166,193);float: right;margin-top: 5px">
                    <a @click="gotoDetails(item.id,item.detailPath)"> <span>月销{{ item.sales }}笔</span></a>
                  </div>
                </div>
                <div class="clearFloat"></div>
              </el-col>
            </el-row>

            <el-row v-if="item.showModel === showModel.FACTORY">

              <el-col :span="24" v-if="item.price" style="margin-top: 10px;font-size: 20px;color: red">
                <div style="float: left">
                  <a @click="gotoDetails(item.id,item.detailPath)">
                    <span style="font-size: 10px;">￥</span><span>{{ item.price }}</span>
                  </a>
                </div>
              </el-col>

              <el-col :span="24" v-if="item.title" style="height: 17px;overflow: hidden;text-overflow: ellipsis">
                <a  @click="gotoDetails(item.id,item.detailPath)"> {{ item.title }}</a>
              </el-col>
              <el-col :span="10" v-if="item.evaluate" style="margin-top: 5px;color: rgb(155,166,193);float: left">
                <a  @click="gotoDetails(item.id,item.detailPath)"> <span>回头率</span> {{ item.evaluate }}</a>
              </el-col>
              <el-col :span="10" v-if="item.evaluate" style="margin-top: 5px;color: rgb(155,166,193);float: right">
                <a  @click="gotoDetails(item.id,item.detailPath)"> <span>加工生产</span> </a>
              </el-col>
              <el-col :span="24" v-if="item.shopExplain" style="margin-top: 5px;color: rgb(155,166,193);">
                <el-row>
                  <el-col :span="8" v-for="(row,shopExplainIndex) in item.shopExplain" :key="shopExplainIndex"  style="border: solid #eee thin;text-align: center">
                    <p style="color: #f3715c"><a >{{row.data}}</a></p>
                    <p><a >{{row.explain}}</a></p>
                  </el-col>
                </el-row>
              </el-col>

            </el-row>
          </div>
        </div>
      </el-col>
    </el-row>

  </div>
</template>


<script>

  import BaseVue from '../../components/BaseVue'
  import CommodityShowModelEnum from '../../components/enum/CommodityShowModelEnum'
  export default {
    name: 'ImageExhibition',
    extends:BaseVue,
    props: {
      imagesList: {
        type: Object,
        default: () => {
          return {
            detailPath:'',
            id: null, //商品id
            path: null, //商品主图路径
            width: null, //图片宽度
            height: null, //图片高度
            title: null, //标题
            price: null, //优惠价格
            originalPrice: null,   //原始价格
            evaluate: null, //评价
            collection: null, //收藏
            sales: null,  //月销,
            showModel:null, //展示方式  factory ：  厂家展示，business ： 商家展示
            shopExplain:[
              {
                data:0, //数据
                explain:'' //说明
              }
            ]
          }
        }
      }

    },
    data() {
      return {
        /* 商品展示模式 */
        showModel:{
          FACTORY: CommodityShowModelEnum.FACTORY,
          BUSINESS: CommodityShowModelEnum.BUSINESS,
        }
      }
    },
    methods: {

      /**
       * 跳转商品详情页
       * @param id
       */
      gotoDetails(id,path) {
        this.$router.push(
          {path: path, query: {pkCommodityId: id}}
        );
      },
    }
  }

</script>


<style scoped>
  #container:hover {
    box-shadow: 0 0 15px #888888;
  }

  a:hover {
    color: red;
  }

  .clearFloat {
    clear: both;
  }
</style>
